<template>
  <div class="lbox">
    <img class="logo-img" src="@/assets/images/logo.png" alt="" />
    <div class="title">微澜AI智能交易平台</div>
    <div class="ibox">
      <div class="ili">
        <div class="ili-1">邮箱</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.email"
            placeholder="请输入邮箱"
            :border="false"
            @blur="handleBlur"
          />
          <div class="obox" v-show="isShow">
            <div
              class="oli"
              v-for="item in autoArr"
              :key="item"
              @click="chooseEmail(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">验证码</div>
        <div class="ili-2">
          <van-field
            :border="false"
            v-model="submitForm.verificationCode"
            placeholder="请输入验证码"
          />
          <span class="fasong" @click="sendEmailCode">{{ emailText }}</span>
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">资金密码</div>
        <div class="ili-2">
          <van-field
            type="password"
            v-model="submitForm.password"
            placeholder="最少6位,包含大写字母,小写字母和数字"
          />
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">确认资金密码</div>
        <div class="ili-2">
          <van-field
            type="password"
            v-model="submitForm.rePassword"
            placeholder="最少6位,包含大写字母,小写字母和数字"
          />
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">邀请码</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.invitationCode"
            placeholder="请输入邀请码"
          />
        </div>
      </div>
      <div class="btn" @click="handleReg">注册</div>
      <div class="tips">
        <span @click="toLogin">去登录</span>
        <span @click="toHome">游客登录</span>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from "vant";
import { useStore } from "@/store";
import { isEmail, passwordCheck } from "@/utils/common";
const route = useRoute();
const store = useStore();
const router = useRouter();
const submitForm = reactive({
  email: "",
  verificationCode: "123456",
  invitationCode: route.query.invitationCode || "123456",
  password: "",
  rePassword: "",
});
let emailText = ref<string | number>("发送");
const toLogin = () => {
  router.push("/login");
};
const toHome = () => {
  router.push("/");
};
const emailArr = [
  "@qq.com",
  "@163.com",
  "@139.com",
  "@126.com",
  "@gmail.com",
  "@hotmail.com",
  "@yahoo.com",
  "@outlook.com",
];
const isShow = ref(false);
const autoArr = ref<any>([]);
watch(
  () => submitForm.email,
  (newVal) => {
    if (newVal) {
      if (newVal.includes("@")) {
        isShow.value = false;
      } else {
        autoArr.value = emailArr.map((v) => newVal + v);
        isShow.value = true;
      }
    } else {
      isShow.value = false;
    }
  }
);
const chooseEmail = (email: string) => {
  submitForm.email = email;
  isShow.value = false;
};
const handleBlur = () => {
  const timer = setTimeout(() => {
    isShow.value = false;
    clearTimeout(timer);
  }, 10);
};
const sendEmailCode = () => {
  if (!isEmail(submitForm.email)) {
    Toast("请输入正确的邮箱");
    return;
  }
  if (emailText.value === "发送") {
    emailText.value = 60;
    const timer = setInterval(() => {
      if (emailText.value <= 0) {
        emailText.value = "发送";
        clearInterval(timer);
        return;
      }
      (emailText.value as number) -= 1;
    }, 1000);
    store
      .dispatch("users/sendEmailCode", {
        email: submitForm.email,
        type: 0,
      })
      .then((res) => {
        if (res.code === 0) {
          Toast("验证码已发送");
          return;
        } else {
          Toast(res.msg);
          emailText.value = "发送";
          clearInterval(timer);
        }
      });
  }
};
const handleReg = () => {
  if (!isEmail(submitForm.email)) {
    Toast("请输入正确的邮箱");
    return;
  }
  if (!submitForm.verificationCode) {
    Toast("请输入验证码");
    return;
  }
  if (!passwordCheck(submitForm.password)) {
    Toast("资金密码格式不正确");
    return;
  }
  if (submitForm.password !== submitForm.rePassword) {
    Toast("资金密码两次输入不一致");
    return;
  }
  if (!submitForm.invitationCode) {
    Toast("请输入邀请码");
    return;
  }
  store
    .dispatch("users/register", {
      userId: store.state.users.infos.id,
      email: submitForm.email,
      password: submitForm.password,
      invitationCode: submitForm.invitationCode,
      verificationCode: submitForm.verificationCode,
    })
    .then((res) => {
      if (res) {
        Toast("注册成功");
        router.push("/");
      }
    });
};
// {
//     "userId": "1",
//     "email": "1@1.com",
//     "userName": "zz",
//     "password": "123",
//     "invitationCode": "AWQED1Q8",
//     "verificationCode": "123456"
// }
</script>

<style lang="scss" scoped>
.lbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
}
.logo-img {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
}
.title {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  font-size: 18px;
  color: #000;
  text-align: center;
}
.ibox {
  margin: 22vh 20px 0;
  .ili {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    .ili-1 {
      font-size: 13px;
      color: #000;
      margin-bottom: 10px;
    }
    .ili-2 {
      background-color: #f1f1f1;
      border-radius: 4px;
      height: 38px;
      position: relative;
      .obox {
        min-width: 150px;
        max-height: 160px;
        overflow-y: scroll;
        padding: 0 10px;
        background: #fff;
        color: #000;
        border-radius: 4px;
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        z-index: 9999;
        .oli {
          font-size: 14px;
          display: flex;
          align-items: center;
          height: 32px;
        }
      }
      .fasong {
        font-size: 13px;
        color: #36b4ea;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
      }
    }
  }
}
.btn {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: #36b4ea;
  border-radius: 3px;
  margin-top: 30px;
}
.tips {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  color: #f5f5f5;
  span {
    // color: #36b4ea;
    display: inline-block;
    padding: 10px 15px;
    background-color: #36b4ea !important;
    color: #fff;
    border-radius: 4px;
  }
  // .lv{
  //   // color: #36b4ea;
  //   display: inline-block;
  //   padding:10px 15px;
  //   background-color: #2196f3;
  //   color:#f5f5f5;
  //   border-radius: 4px;
  // }
}
</style>
